<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      title="会员卡管理" 
      left-icon="back" 
      :right-text="'添加'"
      @clickLeft="handleBack"
      @clickRight="showAddCardModal"
      background-color="#2979FF"
      color="#fff"
    />

    <!-- 会员卡轮播展示区 -->
    <view class="card-carousel-container">
      <swiper 
        class="card-swiper"
        :indicator-dots="cardList.length > 1"
        :autoplay="false"
        :circular="false"
        indicator-color="rgba(255,255,255,0.3)"
        indicator-active-color="#fff"
        @change="handleCardChange"
      >
        <swiper-item v-for="(card, index) in cardList" :key="card.id" class="swiper-item">
          <view class="member-card" :class="getCardThemeClass(card.theme)">
            <view class="card-header">
              <view class="card-logo">
                <image v-if="card.logo" :src="card.logo" class="logo-image" />
                <view v-else class="logo-placeholder">
                  <uni-icons type="vip" size="24" color="#fff" />
                </view>
              </view>
              <view class="card-title">
                <text class="card-name">{{ card.name }}</text>
                <text class="card-level">{{ card.level_name }}</text>
              </view>
              <view class="card-status" :class="getCardStatusClass(card.status)">
                {{ getCardStatusText(card.status) }}
              </view>
            </view>
            
            <view class="card-content">
              <view class="card-number">
                <text class="number-label">卡号</text>
                <text class="number-value">{{ formatCardNumber(card.card_number) }}</text>
              </view>
              
              <view class="card-info-row">
                <view class="info-item">
                  <text class="info-label">余额</text>
                  <text class="info-value">¥{{ (card.balance / 100).toFixed(2) }}</text>
                </view>
                <view class="info-item">
                  <text class="info-label">积分</text>
                  <text class="info-value">{{ card.points }}</text>
                </view>
              </view>
              
              <view class="card-validity">
                <text class="validity-label">有效期至</text>
                <text class="validity-value">{{ formatDate(card.expire_time) }}</text>
              </view>
            </view>
            
            <view class="card-pattern">
              <view class="pattern-circle circle-1"></view>
              <view class="pattern-circle circle-2"></view>
              <view class="pattern-circle circle-3"></view>
            </view>
          </view>
        </swiper-item>
        
        <!-- 空状态 -->
        <swiper-item v-if="cardList.length === 0" class="swiper-item">
          <view class="empty-card">
            <uni-icons type="plus" size="40" color="#ccc" />
            <text class="empty-text">暂无会员卡</text>
            <text class="empty-desc">点击右上角添加会员卡</text>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 当前卡片信息详情 -->
    <view v-if="currentCard" class="card-detail-section">
      <uni-card title="卡片信息" :is-shadow="true" margin="15px">
        <view class="detail-content">
          <view class="detail-row">
            <text class="detail-label">卡片名称</text>
            <text class="detail-value">{{ currentCard.name }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">卡片类型</text>
            <text class="detail-value">{{ getCardTypeName(currentCard.type) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">会员等级</text>
            <text class="detail-value">{{ currentCard.level_name }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">开卡时间</text>
            <text class="detail-value">{{ formatDateTime(currentCard.created_at) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">最后使用</text>
            <text class="detail-value">{{ formatDateTime(currentCard.last_used_at) }}</text>
          </view>
          <view v-if="currentCard.description" class="detail-row">
            <text class="detail-label">卡片描述</text>
            <text class="detail-value">{{ currentCard.description }}</text>
          </view>
        </view>
      </uni-card>
    </view>

    <!-- 操作按钮组 -->
    <view v-if="currentCard" class="action-buttons">
      <button class="action-btn edit-btn" @click="editCard">
        <uni-icons type="compose" size="18" color="#2979FF" />
        <text>编辑</text>
      </button>
      <button class="action-btn share-btn" @click="shareCard">
        <uni-icons type="redo" size="18" color="#52c41a" />
        <text>分享</text>
      </button>
      <button class="action-btn print-btn" @click="printCard">
        <uni-icons type="printer" size="18" color="#722ed1" />
        <text>打印</text>
      </button>
      <button class="action-btn status-btn" @click="toggleCardStatus">
        <uni-icons :type="currentCard.status === 1 ? 'eye-slash' : 'eye'" size="18" color="#fa8c16" />
        <text>{{ currentCard.status === 1 ? '停用' : '启用' }}</text>
      </button>
    </view>

    <!-- 添加/编辑会员卡弹窗 -->
    <uni-popup ref="cardFormPopupRef" type="bottom">
      <view class="card-form-popup">
        <view class="popup-header">
          <text class="popup-title">{{ isEditMode ? '编辑会员卡' : '添加会员卡' }}</text>
          <uni-icons type="close" size="20" @click="closeCardFormModal" />
        </view>
        
        <scroll-view scroll-y class="form-content">
          <uni-forms ref="cardFormRef" :model="cardForm" :rules="cardFormRules">
            <uni-forms-item label="卡片名称" name="name" required>
              <uni-easyinput 
                v-model="cardForm.name" 
                placeholder="请输入卡片名称"
                :maxlength="20"
              />
            </uni-forms-item>
            
            <uni-forms-item label="卡片类型" name="type" required>
              <uni-data-select 
                v-model="cardForm.type"
                :localdata="cardTypeOptions"
                placeholder="请选择卡片类型"
              />
            </uni-forms-item>
            
            <uni-forms-item label="会员等级" name="level_id" required>
              <uni-data-select 
                v-model="cardForm.level_id"
                :localdata="levelOptions"
                placeholder="请选择会员等级"
              />
            </uni-forms-item>
            
            <uni-forms-item label="卡片主题" name="theme">
              <view class="theme-selector">
                <view 
                  class="theme-option"
                  v-for="theme in themeOptions"
                  :key="theme.value"
                  :class="{ active: cardForm.theme === theme.value }"
                  @click="cardForm.theme = theme.value"
                >
                  <view class="theme-preview" :class="theme.class"></view>
                  <text class="theme-name">{{ theme.text }}</text>
                </view>
              </view>
            </uni-forms-item>
            
            <uni-forms-item label="有效期" name="expire_time">
              <uni-datetime-picker 
                v-model="cardForm.expire_time"
                type="date"
                :clear-icon="false"
              >
                <template v-slot:default>
                  <uni-easyinput 
                    :value="cardForm.expire_time" 
                    placeholder="请选择有效期"
                    readonly
                  />
                </template>
              </uni-datetime-picker>
            </uni-forms-item>
            
            <uni-forms-item label="初始余额" name="initial_balance">
              <uni-easyinput 
                v-model="cardForm.initial_balance" 
                type="digit"
                placeholder="请输入初始余额(元)"
              />
            </uni-forms-item>
            
            <uni-forms-item label="初始积分" name="initial_points">
              <uni-easyinput 
                v-model="cardForm.initial_points" 
                type="number"
                placeholder="请输入初始积分"
              />
            </uni-forms-item>
            
            <uni-forms-item label="卡片描述" name="description">
              <uni-easyinput 
                v-model="cardForm.description" 
                type="textarea"
                placeholder="请输入卡片描述"
                :maxlength="200"
              />
            </uni-forms-item>
          </uni-forms>
        </scroll-view>
        
        <view class="popup-footer">
          <button class="cancel-btn" @click="closeCardFormModal">取消</button>
          <button class="confirm-btn" @click="submitCardForm" :loading="submitting">
            {{ isEditMode ? '保存' : '创建' }}
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 分享弹窗 -->
    <uni-popup ref="sharePopupRef" type="bottom">
      <view class="share-popup">
        <view class="popup-header">
          <text class="popup-title">分享会员卡</text>
          <uni-icons type="close" size="20" @click="closeShareModal" />
        </view>
        
        <view class="share-content">
          <view class="share-options">
            <view class="share-option" @click="shareToWeChat">
              <view class="share-icon wechat">
                <uni-icons type="weixin" size="24" color="#07c160" />
              </view>
              <text class="share-text">微信</text>
            </view>
            <view class="share-option" @click="shareToQQ">
              <view class="share-icon qq">
                <uni-icons type="qq" size="24" color="#12b7f5" />
              </view>
              <text class="share-text">QQ</text>
            </view>
            <view class="share-option" @click="copyCardInfo">
              <view class="share-icon copy">
                <uni-icons type="copy" size="24" color="#666" />
              </view>
              <text class="share-text">复制</text>
            </view>
            <view class="share-option" @click="saveCardImage">
              <view class="share-icon save">
                <uni-icons type="download" size="24" color="#722ed1" />
              </view>
              <text class="share-text">保存图片</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { fetchMemberCards, createMemberCard, updateMemberCard, fetchMemberLevels } from '@/api/member';
import type { MemberCard, MemberLevel } from '@/types/member';

const memberId = ref<number | null>(null);
const cardList = ref<MemberCard[]>([]);
const levelOptions = ref<any[]>([]);
const currentCardIndex = ref(0);
const loading = ref(false);
const submitting = ref(false);
const isEditMode = ref(false);

const cardFormPopupRef = ref<any>(null);
const sharePopupRef = ref<any>(null);
const cardFormRef = ref<any>(null);

const currentCard = computed(() => {
  return cardList.value[currentCardIndex.value] || null;
});

const cardForm = reactive({
  id: null as number | null,
  name: '',
  type: 1,
  level_id: null as number | null,
  theme: 'blue',
  expire_time: '',
  initial_balance: '',
  initial_points: '',
  description: '',
});

const cardFormRules = {
  name: {
    rules: [
      { required: true, errorMessage: '请输入卡片名称' },
      { minLength: 2, maxLength: 20, errorMessage: '卡片名称长度为2-20个字符' }
    ]
  },
  type: {
    rules: [{ required: true, errorMessage: '请选择卡片类型' }]
  },
  level_id: {
    rules: [{ required: true, errorMessage: '请选择会员等级' }]
  }
};

// 卡片类型选项
const cardTypeOptions = [
  { value: 1, text: '储值卡' },
  { value: 2, text: '积分卡' },
  { value: 3, text: '折扣卡' },
  { value: 4, text: '次卡' },
];

// 主题选项
const themeOptions = [
  { value: 'blue', text: '经典蓝', class: 'theme-blue' },
  { value: 'purple', text: '优雅紫', class: 'theme-purple' },
  { value: 'green', text: '清新绿', class: 'theme-green' },
  { value: 'gold', text: '尊贵金', class: 'theme-gold' },
  { value: 'red', text: '热情红', class: 'theme-red' },
  { value: 'black', text: '神秘黑', class: 'theme-black' },
];

// 获取会员卡列表
const getCardList = async () => {
  if (!memberId.value || loading.value) return;
  loading.value = true;

  try {
    const res = await fetchMemberCards(memberId.value);
    cardList.value = res.list || [];
  } catch (error: any) {
    uni.showToast({
      title: error.message || '获取会员卡失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 获取会员等级列表
const getLevelOptions = async () => {
  try {
    const res = await fetchMemberLevels();
    levelOptions.value = (res.list || []).map((level: MemberLevel) => ({
      value: level.id,
      text: level.name
    }));
  } catch (error: any) {
    console.error('获取会员等级失败:', error);
  }
};

// 格式化卡号
const formatCardNumber = (cardNumber: string) => {
  if (!cardNumber) return '';
  return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
};

// 格式化日期
const formatDate = (timestamp: number) => {
  if (!timestamp) return '永久有效';
  return new Date(timestamp * 1000).toLocaleDateString('zh-CN');
};

// 格式化日期时间
const formatDateTime = (timestamp: number) => {
  if (!timestamp) return '-';
  return new Date(timestamp * 1000).toLocaleString('zh-CN');
};

// 获取卡片主题样式类
const getCardThemeClass = (theme: string) => {
  return `card-theme-${theme}`;
};

// 获取卡片状态样式类
const getCardStatusClass = (status: number) => {
  return status === 1 ? 'status-active' : 'status-inactive';
};

// 获取卡片状态文本
const getCardStatusText = (status: number) => {
  return status === 1 ? '正常' : '停用';
};

// 获取卡片类型名称
const getCardTypeName = (type: number) => {
  const typeMap: { [key: number]: string } = {
    1: '储值卡',
    2: '积分卡',
    3: '折扣卡',
    4: '次卡',
  };
  return typeMap[type] || '未知类型';
};

// 处理卡片切换
const handleCardChange = (e: any) => {
  currentCardIndex.value = e.detail.current;
};

// 显示添加卡片弹窗
const showAddCardModal = () => {
  isEditMode.value = false;
  resetCardForm();
  cardFormPopupRef.value?.open();
};

// 编辑卡片
const editCard = () => {
  if (!currentCard.value) return;
  
  isEditMode.value = true;
  cardForm.id = currentCard.value.id;
  cardForm.name = currentCard.value.name;
  cardForm.type = currentCard.value.type;
  cardForm.level_id = currentCard.value.level_id;
  cardForm.theme = currentCard.value.theme || 'blue';
  cardForm.expire_time = currentCard.value.expire_time ? new Date(currentCard.value.expire_time * 1000).toISOString().split('T')[0] : '';
  cardForm.description = currentCard.value.description || '';
  
  cardFormPopupRef.value?.open();
};

// 重置表单
const resetCardForm = () => {
  cardForm.id = null;
  cardForm.name = '';
  cardForm.type = 1;
  cardForm.level_id = null;
  cardForm.theme = 'blue';
  cardForm.expire_time = '';
  cardForm.initial_balance = '';
  cardForm.initial_points = '';
  cardForm.description = '';
};

// 关闭卡片表单弹窗
const closeCardFormModal = () => {
  cardFormPopupRef.value?.close();
};

// 提交卡片表单
const submitCardForm = async () => {
  if (submitting.value) return;

  try {
    await cardFormRef.value?.validate();
  } catch (error) {
    return;
  }

  submitting.value = true;

  try {
    const formData = {
      member_id: memberId.value,
      name: cardForm.name,
      type: cardForm.type,
      level_id: cardForm.level_id,
      theme: cardForm.theme,
      expire_time: cardForm.expire_time ? new Date(cardForm.expire_time).getTime() / 1000 : null,
      initial_balance: cardForm.initial_balance ? parseFloat(cardForm.initial_balance) * 100 : 0,
      initial_points: cardForm.initial_points ? parseInt(cardForm.initial_points) : 0,
      description: cardForm.description,
    };

    if (isEditMode.value && cardForm.id) {
      await updateMemberCard(cardForm.id, formData);
      uni.showToast({ title: '更新成功', icon: 'success' });
    } else {
      await createMemberCard(formData);
      uni.showToast({ title: '创建成功', icon: 'success' });
    }

    closeCardFormModal();
    getCardList();
  } catch (error: any) {
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    });
  } finally {
    submitting.value = false;
  }
};

// 分享卡片
const shareCard = () => {
  sharePopupRef.value?.open();
};

// 关闭分享弹窗
const closeShareModal = () => {
  sharePopupRef.value?.close();
};

// 分享到微信
const shareToWeChat = () => {
  // 实现微信分享逻辑
  uni.showToast({ title: '微信分享功能开发中', icon: 'none' });
  closeShareModal();
};

// 分享到QQ
const shareToQQ = () => {
  // 实现QQ分享逻辑
  uni.showToast({ title: 'QQ分享功能开发中', icon: 'none' });
  closeShareModal();
};

// 复制卡片信息
const copyCardInfo = () => {
  if (!currentCard.value) return;
  
  const cardInfo = `会员卡信息\n卡片名称：${currentCard.value.name}\n卡号：${currentCard.value.card_number}\n余额：¥${(currentCard.value.balance / 100).toFixed(2)}\n积分：${currentCard.value.points}`;
  
  uni.setClipboardData({
    data: cardInfo,
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'success' });
      closeShareModal();
    }
  });
};

// 保存卡片图片
const saveCardImage = () => {
  // 实现保存图片逻辑
  uni.showToast({ title: '保存图片功能开发中', icon: 'none' });
  closeShareModal();
};

// 打印卡片
const printCard = () => {
  // 实现打印逻辑
  uni.showToast({ title: '打印功能开发中', icon: 'none' });
};

// 切换卡片状态
const toggleCardStatus = async () => {
  if (!currentCard.value) return;
  
  const newStatus = currentCard.value.status === 1 ? 0 : 1;
  const statusText = newStatus === 1 ? '启用' : '停用';
  
  try {
    await updateMemberCard(currentCard.value.id, { status: newStatus });
    uni.showToast({ title: `${statusText}成功`, icon: 'success' });
    getCardList();
  } catch (error: any) {
    uni.showToast({
      title: error.message || `${statusText}失败`,
      icon: 'none'
    });
  }
};

// 处理返回
const handleBack = () => {
  uni.navigateBack();
};

onLoad((options: any) => {
  if (options.memberId) {
    memberId.value = parseInt(options.memberId);
  }
});

onShow(() => {
  if (memberId.value) {
    getCardList();
    getLevelOptions();
  }
});
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.card-carousel-container {
  padding: 20px 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-swiper {
  height: 200px;
  border-radius: 12px;
}

.swiper-item {
  padding: 0 10px;
}

.member-card {
  position: relative;
  height: 100%;
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  
  &.card-theme-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  &.card-theme-purple {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  }
  
  &.card-theme-green {
    background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
  }
  
  &.card-theme-gold {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  }
  
  &.card-theme-red {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  &.card-theme-black {
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  
  .card-logo {
    width: 32px;
    height: 32px;
    
    .logo-image {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
    
    .logo-placeholder {
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.2);
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .card-title {
    flex: 1;
    margin-left: 12px;
    
    .card-name {
      display: block;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 2px;
    }
    
    .card-level {
      font-size: 12px;
      color: rgba(255,255,255,0.8);
    }
  }
  
  .card-status {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    
    &.status-active {
      background-color: rgba(82, 196, 26, 0.2);
      color: #52c41a;
    }
    
    &.status-inactive {
      background-color: rgba(245, 34, 45, 0.2);
      color: #f5222d;
    }
  }
}

.card-content {
  color: #fff;
  
  .card-number {
    margin-bottom: 15px;
    
    .number-label {
      display: block;
      font-size: 10px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 4px;
    }
    
    .number-value {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 2px;
    }
  }
  
  .card-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    
    .info-item {
      .info-label {
        display: block;
        font-size: 10px;
        color: rgba(255,255,255,0.7);
        margin-bottom: 2px;
      }
      
      .info-value {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  
  .card-validity {
    .validity-label {
      font-size: 10px;
      color: rgba(255,255,255,0.7);
      margin-right: 8px;
    }
    
    .validity-value {
      font-size: 12px;
    }
  }
}

.card-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  .pattern-circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    
    &.circle-1 {
      width: 80px;
      height: 80px;
      top: -20px;
      right: -20px;
    }
    
    &.circle-2 {
      width: 60px;
      height: 60px;
      top: 60px;
      right: -10px;
    }
    
    &.circle-3 {
      width: 40px;
      height: 40px;
      bottom: 20px;
      right: 20px;
    }
  }
}

.empty-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: rgba(255,255,255,0.1);
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  
  .empty-text {
    margin-top: 10px;
    font-size: 14px;
  }
  
  .empty-desc {
    margin-top: 5px;
    font-size: 12px;
  }
}

.card-detail-section {
  flex: 1;
  overflow-y: auto;
  
  .detail-content {
    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .detail-label {
        font-size: 14px;
        color: #666;
        width: 80px;
        flex-shrink: 0;
      }
      
      .detail-value {
        flex: 1;
        font-size: 14px;
        color: #333;
        text-align: right;
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 10px;
  padding: 15px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  
  .action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 60px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    color: #666;
    
    &.edit-btn {
      color: #2979FF;
    }
    
    &.share-btn {
      color: #52c41a;
    }
    
    &.print-btn {
      color: #722ed1;
    }
    
    &.status-btn {
      color: #fa8c16;
    }
  }
}

.card-form-popup {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  max-height: 80vh;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .popup-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .form-content {
    max-height: 60vh;
    padding: 20px;
    
    .theme-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .theme-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 10px;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        
        &.active {
          border-color: #2979FF;
          background-color: #f0f8ff;
        }
        
        .theme-preview {
          width: 40px;
          height: 24px;
          border-radius: 4px;
          
          &.theme-blue {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.theme-purple {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          }
          
          &.theme-green {
            background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
          }
          
          &.theme-gold {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
          }
          
          &.theme-red {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
          }
          
          &.theme-black {
            background: linear-gradient(135deg, #434343 0%, #000000 100%);
          }
        }
        
        .theme-name {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  
  .popup-footer {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    
    .cancel-btn {
      flex: 1;
      background-color: #f5f5f5;
      color: #666;
      border: none;
      border-radius: 8px;
      height: 44px;
      font-size: 14px;
    }
    
    .confirm-btn {
      flex: 1;
      background-color: #2979FF;
      color: #fff;
      border: none;
      border-radius: 8px;
      height: 44px;
      font-size: 14px;
    }
  }
}

.share-popup {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .popup-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .share-content {
    padding: 20px;
    
    .share-options {
      display: flex;
      justify-content: space-around;
      gap: 20px;
      
      .share-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        
        .share-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          
          &.wechat {
            background-color: #f0f9ff;
          }
          
          &.qq {
            background-color: #f0f8ff;
          }
          
          &.copy {
            background-color: #f5f5f5;
          }
          
          &.save {
            background-color: #f6f0ff;
          }
        }
        
        .share-text {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
